<template>
	<div class="wrapper xiangQing" id="wrapper-xiangQing">
		<myhead activeIndex="/video"></myhead>
		<div class="content center align-start fWrap">
			<div class="left flex">
				<!-- 左侧头部信息 -->
				<div class="bfff left-top">
					<div class="center title">
						<img src="@/assets/image/zhuTi/shipin.png" class="title-icon" alt="" />
						<div class="flex nowrap fbold f18 c333">{{ details.title }}</div>
						<!-- <div style="margin-right: 50px; cursor: pointer" @click="router.go(-1)">
							<el-button type="warning" round>返回列表</el-button>
						</div> -->

						<div class="collect title">
							<div v-if="details.updateAuthority" style="display: flex" @click="edit">
								<img
									src="@/assets/image/zhuTi/bian.png"
									style="cursor: pointer"
									class="bian-icon"
									alt=""
								/>
								<div class="f14 c333" style="cursor: pointer">编辑</div>
							</div>
							<div v-if="details.status == 1">
								<div class="collect-item" v-if="collectStatus == 2" @click="collect">
									<img src="@/assets/image/zhuTi/shouCang.png" class="bian-icon-two" alt="" />
									<div class="f14 c333" style="cursor: pointer">收藏</div>
								</div>
								<div class="collect-item" v-else @click="collect">
									<div v-if="collectStatus" style="display: flex">
										<img
											src="@/assets/image/zhuTi/shouCang1.png"
											class="bian-icon-two bian-icon-img"
											alt=""
										/>
										<div class="f14 c333" style="cursor: pointer">取消收藏</div>
									</div>
								</div>
							</div>
							<div class="return-button" @click="router.go(-1)">
								<el-button type="warning" round>返回</el-button>
							</div>
						</div>
					</div>
					<!-- <span class="c0c">|</span> 下载（<span class="cff7">{{ details.downloadCount }}</span
						>） -->
					<div class="c333">
						浏览（<span class="ctheme">{{ details.readCount }}</span
						>）<span class="c0c">|</span> 点评（<span class="c29">{{ details.commentsCount }}</span
						>）
					</div>
					<div class="hr"></div>
					<div class="flex-start">
						<div class="f16 c2c fbold label tagLabel">
							<div class="tagLabel-title">标签</div>
						</div>
						<!-- <div v-if="tags.length > 10" class="zhankai" @click="tagsExpands">
							{{ tagsExpand ? "收起" : "展开" }}
							<el-icon class="pointer" size="18" color="#2972FA">
								<ArrowUp v-if="tagsExpand" />
								<ArrowDown v-else />
							</el-icon>
						</div> -->
						<div>
							<div class="tag-box">
								<div
									class="center tag"
									v-for="(item, index) in tags"
									:key="item.id"
									@click="onTags(item)"
								>
									<img src="@/assets/image/zhuTi/biao.png" class="biao-icon" alt="" />
									<div class="f14 ctheme">{{ item.name }}</div>
								</div>
								<div v-if="tags.length >= 10" class="zhankai" @click="tagsExpands">
									{{ tagsExpand ? "收起" : "展开" }}
									<el-icon class="pointer" size="18" color="#2972FA">
										<ArrowUp v-if="tagsExpand" />
										<ArrowDown v-else />
									</el-icon>
								</div>
							</div>
						</div>
						<!-- <div class="tag-box" v-if="tagsExpand">
							<div class="center tag" v-for="item in tags" :key="item.id" @click="onTags(item)">
								<img src="@/assets/image/zhuTi/biao.png" class="biao-icon" alt="" />
								<div class="f14 ctheme">{{ item.name }}</div>
							</div>
						</div> -->
					</div>
					<div class="hr"></div>
					<div class="center flex-start fWrap">
						<div class="f16 c2c fbold label">知识分类</div>
						<div class="cff9">{{ ctIdName }}</div>
					</div>
					<div class="hr"></div>
					<div class="zhaiyao">
						<div class="f16 fbold c2c mb10">摘要</div>
						<div class="c999" v-if="details.remark">{{ details.remark }}</div>
					</div>
				</div>
				<!-- 视频播放 -->
				<div class="left-ppt">
					<video v-if="details.videoUrl" :src="details.videoUrl" controls></video>
				</div>
				<!-- 评论 -->
				<div class="bfff left-rating">
					<div class="f20 c333">评论</div>
					<el-input
						class="rating-input"
						type="textarea"
						show-word-limit
						:maxlength="400"
						v-model="oneReply"
						:placeholder="'请输入评论内容'"
					></el-input>
					<div class="center flex-end">
						<el-button type="primary" @click="onPublish">发表</el-button>
					</div>
					<!-- <div class="hr"></div> -->
					<!-- <div class="f31 c96 norating">还没评论，快来说两句</div> -->
					<div v-if="oneComments.length" v-infinite-scroll="load" infinite-scroll-delay="500">
						<div class="f18" style="margin-bottom: 5px">评论</div>
						<div v-for="item in oneComments" :key="item.id">
							<div class="firstLevelComments f16">
								<el-avatar :size="25" :src="item.avatar" v-if="item.avatar" />
								<img v-else src="@/assets/image/index/user.jpg" />
								<div class="f14 firstLevelComments-name">{{ item.nickname }}</div>
								<div class="f14">{{ item.createTime }}</div>
								<div class="hfsc">
									<div class="hfsc-dian-item f16" v-if="item.upStatus == 1" @click="like(item, '2')">
										<img
											src="@/assets/image/geRen/dianZan2.png"
											class="hfsc-dian-item-img"
											alt=""
										/>
									</div>
									<div class="hfsc-dian-item f16" v-else @click="like(item, '1')">
										<img src="@/assets/image/geRen/dianZan.png" alt="" />
									</div>
									<div @click="onReplyA(item)" class="hfsc-dian f16" style="cursor: pointer">
										<img src="@/assets/image/geRen/pingLun.png" alt="" />
									</div>
									<div
										@click="onDelPLA(item.id)"
										v-if="details.deleteCommentsAuthority"
										class="hfsc-dian-item f16"
										style="cursor: pointer"
									>
										<img src="@/assets/image/geRen/shanChu.png" alt="" />
									</div>
								</div>
							</div>
							<pre class="firstContenr">{{ item.content }}</pre>
							<template v-if="item.id == replyA">
								<div class="comments">
									<el-input
										class="comments-input"
										v-model="oneHF"
										type="textarea"
										:rows="2"
										show-word-limit
										:maxlength="400"
										:autosize="{
											minRows: 6,
											maxRows: 10,
										}"
										:placeholder="'请输入回复内容'"
									/>
									<div class="comments-button">
										<!-- class="comments-button-qx" -->
										<el-button type="primary" plain @click="returnOne"> 取消 </el-button>
										<el-button type="primary" @click="twoHFA(item)">回复</el-button>
									</div>
								</div>
							</template>

							<div v-if="item.id == sar" class="erji f14">
								<div v-for="items in twoComments" :key="item.id" class="bor0">
									<div class="firstLevelComments-two">
										<div class="firstLevelComments-x">
											<div class="firstLevelComments-item">
												<el-avatar :size="25" :src="items.avatar" v-if="items.avatar" />
												<img v-else src="@/assets/image/index/user.jpg" />
												<div class="firstLevelComments-name">{{ items.nickname }}</div>
												<!-- <div>{{ items.createTime }}</div> -->
											</div>
											<div class="huifu">回复</div>
											<div class="firstLevelComments-item">
												<el-avatar
													:size="25"
													:src="items.parentAvatar"
													v-if="items.parentAvatar"
												/>
												<img v-else src="@/assets/image/index/user.jpg" />
												<div class="firstLevelComments-name">{{ items.parentName }}</div>
												<div>{{ items.createTime }}</div>
											</div>
										</div>
										<div class="firstLevelComments-y">
											<div class="firstLevelComments-item">
												<el-avatar :size="25" :src="items.avatar" v-if="items.avatar" />
												<img v-else src="@/assets/image/index/user.jpg" />
												<div class="firstLevelComments-name">{{ items.nickname }}</div>
												<!-- <div>{{ items.createTime }}</div> -->
											</div>
											<div class="huifu">回复</div>
											<div class="firstLevelComments-item">
												<el-avatar
													:size="25"
													:src="items.parentAvatar"
													v-if="items.parentAvatar"
												/>
												<img v-else src="@/assets/image/index/user.jpg" />
												<div class="firstLevelComments-name">{{ items.parentName }}</div>
												<div>{{ items.createTime }}</div>
											</div>
										</div>
										<div class="hfsc">
											<div
												class="hfsc-dian f14"
												v-if="items.upStatus == 1"
												@click="likes(items, '2', item)"
											>
												<img
													src="@/assets/image/geRen/dianZan2.png"
													class="hfsc-dian-item"
													alt=""
												/>
											</div>
											<div class="hfsc-dian f14" v-else @click="likes(items, '1', item)">
												<img src="@/assets/image/geRen/dianZan.png" alt="" />
											</div>
											<div @click="onReplyB(items)" class="hfsc-dian f14" style="cursor: pointer">
												<img src="@/assets/image/geRen/pingLun.png" alt="" />
											</div>
											<div
												@click="onDelPLB(items.id, item.id)"
												v-if="details.deleteCommentsAuthority"
												class="hfsc-dian f14"
												style="cursor: pointer"
											>
												<img src="@/assets/image/geRen/shanChu.png" alt="" />
											</div>
										</div>
									</div>
									<pre class="firstLevelComments-two-content">{{ items.content }}</pre>
									<template v-if="items.id == replyB">
										<div class="comments">
											<el-input
												class="comments-input"
												v-model="twoHF"
												type="textarea"
												:rows="2"
												show-word-limit
												:maxlength="400"
												:autosize="{
													minRows: 6,
													maxRows: 10,
												}"
												:placeholder="'请输入回复内容'"
											/>
											<div class="comments-button">
												<!-- class="comments-button-qx" -->
												<el-button type="primary" plain @click="returnTwo"> 取消 </el-button>
												<el-button type="primary" @click="twoHFB(item)">回复</el-button>
											</div>
										</div>
									</template>
								</div>
								<div class="twoPase" v-if="parseInt(twoCommenttotle / 1) > 1">
									<div class="twoPage-ye" @click="onToTwoPage(1)">上一页</div>
									<div
										v-for="(item, index) in parseInt(twoCommenttotle / 1)"
										:key="index"
										class="twoPase-page"
										:class="{
											active: index == twoIndex,
										}"
										@click="twoPage(index)"
									>
										{{ item }}
									</div>
									<div class="twoPage-ye" @click="onToTwoPage(2)">下一页</div>
								</div>
							</div>
							<div v-else>
								<div v-if="item.isReply == '1'" class="zhankai" @click="onZhan(item)">
									点击展开更多评论
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="right">
				<jiben :details="details"></jiben>
				<tuiJian></tuiJian>
			</div>
		</div>
		<v-myfoot></v-myfoot>
		<el-dialog
			v-model="dialogVisible"
			width="30%"
			:show-close="false"
			:close-on-click-modal="false"
			destroy-on-close
		>
			<template #header="{ close, titleId, titleClass }">
				<div class="dialog-header center btheme cfff">
					<div class="flex f33 fbold">提示</div>
					<el-icon class="pointer" size="20" color="#fff" @click="onGuan">
						<Close />
					</el-icon>
				</div>
			</template>
			<div class="jinggao">
				<img src="@/assets/image/index/jingGao.png" alt="" />
				<div class="jinggao-item">暂无权限，请联系管理员</div>
			</div>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="onGuan">返回上一级</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script setup>
import { Star, StarFilled, Delete, ChatDotSquare } from "@element-plus/icons-vue"
import tuiJian from "./components/tuijian.vue"
import jiben from "./components/jiben.vue"
import { ElMessage, ElMessageBox } from "element-plus"
const { proxy } = getCurrentInstance()
const route = useRoute()
const router = useRouter()
const checked1 = ref(false)
const dialogVisible = ref(false)
const oneCommentsList = ref(0)
//详情
const details = ref({})
//一级评论
const oneComments = ref([])
//二级评论
const twoComments = ref([])
//添加一级评论
const oneReply = ref("")
const twoIndex = ref(0)
//展开标签
const tagsExpand = ref(true)
//一级评论分页
const commentsPage = ref(1)
//标签
const tags = ref([])
//分类
const ctIdName = ref("")
const twoCommentPage = ref(1)
const twoCommenttotle = ref(0)
//一级回复
const oneHF = ref("")
const twoHF = ref("")
const replyA = ref("")
//二级回复
const replyB = ref("")
const collectStatus = ref(null)
const fileIndex = ref(0)
const baseUrl = ref("")
const resId = ref({})
async function created() {
	if (typeof window.c != "undefined") {
		resId.value = window.c
	} else {
		resId.value = await getAxios(`/knowledge/kbVideo/findByIdVideo?id=${route.query.id}&num=1`)
	}
	details.value = resId.value
	collectStatus.value = +details.value.collectStatus
	ctIdName.value = resId.value.categoryName
	oneComments.value = await getAxios(`/knowledge/kbComment/pageKbComment?basicId=${resId.value.id}&current=1&size=10`)
	oneCommentsList.value = oneComments.value.length + 1

	tags.value = await getAxios(`/knowledge/kbBasicLabel/list?bId=${resId.value.id}`)
	// await getAxios(`/knowledge/kbVideo/${res.id}`)
}
const onPublish = async () => {
	if (details.value.status == 2) {
		ElMessage.error("未发布不允许评论")
	} else {
		if (oneReply.value == "") {
			ElMessage.error("请输入评论内容")
			return
		}
		await postAxios("/knowledge/kbComment/save", {
			content: oneReply.value,
			basicId: route.query.id,
			parentId: "",
		})
		onePin(resId.value.id, oneCommentsList.value)
	}
	oneReply.value = ""
}
created()
//一级回复
const onReplyA = async item => {
	if (details.value.status == 2) {
		ElMessage.error("未发布不允许评论")
	} else {
		replyA.value = item.id
	}
}
const twoHFA = async item => {
	if (oneHF.value == "") {
		ElMessage.error("请输入回复内容")
		return
	}
	sar.value = item.id
	await postAxios("/knowledge/kbComment/save", {
		content: oneHF.value,
		basicId: route.query.id,
		parentId: replyA.value,
	})
	replyA.value = ""
	oneHF.value = ""
	onePin(resId.value.id, oneCommentsList.value)
	twoPin(item.id, twoCommentPage.value)
}
//二级回复
const onReplyB = item => {
	if (details.value.status == 2) {
		ElMessage.error("未发布不允许评论")
	} else {
		replyA.value = ""
		replyB.value = item.id
	}
}
const twoHFB = async item => {
	if (twoHF.value == "") {
		ElMessage.error("请输入回复内容")
		return
	}
	await postAxios("/knowledge/kbComment/save", {
		content: twoHF.value,
		basicId: route.query.id,
		parentId: replyB.value,
	})
	replyB.value = ""
	twoHF.value = ""
	twoPin(item.id, twoCommentPage.value)
}
//展开评论
const sar = ref("")
const onZhan = async item => {
	sar.value = item.id
	twoPin(item.id, twoCommentPage.value)
}
async function onePin(val, size) {
	try {
		oneComments.value = await getAxios(`/knowledge/kbComment/pageKbComment?basicId=${val}&current=1&size=${size}`)
		oneCommentsList.value = oneComments.value.length + 1
	} catch (error) {
		ElMessage.error(error)
	}
}
async function twoPin(val, size) {
	try {
		const res = await getAxios(`/knowledge/kbComment/findByParentId?id=${val}&size=10&current=${size}`)
		twoComments.value = res.records
		twoCommenttotle.value = (+res.total + 10 - 1) / 10
	} catch (error) {
		ElMessage.error(error)
	}
}
const timeCL = item => {
	return item.substring(0, 10)
}
//一级评论删除
const onDelPLA = id => {
	if (details.value.status == 2) {
		ElMessage.error("未发布不允许删除")
	} else {
		ElMessageBox.confirm("是否确认删除", "提示", {
			confirmButtonText: "确定",
			cancelButtonText: "取消",
			type: "warning",
		}).then(async () => {
			await deleteAxios(`/knowledge/kbComment/deleteBatch?id=${id}`)
			onePin(resId.value.id, oneCommentsList.value)
		})
	}
}
//二级评论删除
const onDelPLB = (id, fuId) => {
	if (details.value.status == 2) {
		ElMessage.error("未发布不允许删除")
	} else {
		ElMessageBox.confirm("是否确认删除", "提示", {
			confirmButtonText: "确定",
			cancelButtonText: "取消",
			type: "warning",
		}).then(async () => {
			await deleteAxios(`/knowledge/kbComment/delete?id=${id}`)
			twoPin(fuId, twoCommentPage.value)
			if (twoComments.value.length == 0) {
				sar.value = ""
				onePin(resId.value.id, oneCommentsList.value)
			}
		})
	}
}
//编辑
const edit = () => {
	router.push({ path: "/addVideo", query: { id: resId.value.id, swId: resId.value.swId, edit: "2" } })
}
const handleScroll = () => {
	document.getElementById("wrapper-xiangQing").scrollTop = 0
}
watch(
	() => route.query,
	() => {
		localStorage.removeItem("videoDetails")
		handleScroll()
		created()
	}
)
onUnmounted(() => {
	localStorage.removeItem("videoDetails")
})
const collect = async () => {
	if (collectStatus.value == 1) {
		collectStatus.value = 2
	} else {
		collectStatus.value = 1
	}
	await postAxios("/knowledge/kbCollect/save", {
		basicId: details.value.id,
		type: 2,
		status: collectStatus.value,
	})
}
const like = async (val, status) => {
	if (details.value.status == 2) {
		ElMessage.error("未发布不允许点赞")
	} else {
		await postAxios(`/knowledge/kbThumbsUp/save`, {
			commentId: val.id,
			status: status,
			basicId: details.value.id,
		})
		onePin(resId.value.id, oneCommentsList.value)
	}
}
const likes = async (val, status, item) => {
	if (details.value.status == 2) {
		ElMessage.error("未发布不允许点赞")
	} else {
		await postAxios(`/knowledge/kbThumbsUp/save`, {
			commentId: val.id,
			status: status,
			basicId: details.value.id,
		})
		twoPin(item.id, twoCommentPage.value)
	}
}
const onTags = item => {
	router.push({ path: "/search", query: { tag: item.name, tags: "03", active: 2 } })
}
const returnTwo = () => {
	twoHF.value = ""
	replyB.value = ""
}
const returnOne = () => {
	oneHF.value = ""
	replyA.value = ""
}
//展开标签
const tagsExpands = async () => {
	tagsExpand.value = !tagsExpand.value
	if (tagsExpand.value) {
		tags.value = await getAxios(`/knowledge/kbBasicLabel/list?bId=${resId.value.id}`)
	} else {
		const res = await getAxios(`/knowledge/kbBasicLabel/list?bId=${resId.value.id}`)
		tags.value = res.splice(0, 10)
	}
}
onUnmounted(() => {
	window.c = undefined
})

//滚动加载
const load = async () => {
	commentsPage.value += 1
	const res = await getAxios(
		`/knowledge/kbComment/pageKbComment?basicId=${resId.value.id}&current=${commentsPage.value}&size=10`
	)
	oneComments.value = [...oneComments.value, ...res]
	oneCommentsList.value = oneComments.value.length + 1
}
//二级分页
const twoPage = async index => {
	twoIndex.value = index
	twoCommentPage.value = index + 1
	twoPin(sar.value, twoCommentPage.value)
}
const onToTwoPage = async val => {
	if (twoCommentPage.value == 1 && val == 1) {
		return ElMessage.error("当前为第一页")
	}
	if (twoCommentPage.value == parseInt(twoCommenttotle.value) && val == 2) {
		return ElMessage.error("当前为最后一页")
	}
	if (val == 1) {
		twoIndex.value -= 1
		twoCommentPage.value -= 1
	} else {
		twoIndex.value += 1
		twoCommentPage.value += 1
	}
	twoPin(sar.value, twoCommentPage.value)
}
</script>
<style lang="scss" scoped>
@import "/style/basis";
.xiangQing {
	background-color: #f8f8f8;

	.left-rating {
		padding: 30px 25px;
		margin-top: 15px;

		.hr {
			height: 4px;
			background: #f8f8f8;
			margin: 15px 0 24px;
		}

		:deep(.el-textarea .el-input__count) {
			bottom: 20px;
			right: 11px;
			color: #909399;
		}

		:deep(.rating-input .el-textarea__inner) {
			height: 122px;
			border-radius: 3px;
			margin: 20px 0 12px;
		}
	}

	.left-ppt {
		margin-top: 15px;

		video {
			width: 100%;
			height: 750px;
		}

		.ppt-icon {
			width: 17px;
			margin-right: 10px;
		}

		.title {
			background-color: #f5f6fa;
			padding: 15px 25px;
		}
	}

	.left-top {
		padding: 20px 25px;
		> .title {
			margin-bottom: 15px;
		}
		.zhaiyao {
			display: flex;
			flex-direction: column;
			justify-content: center;
		}
		.collect {
			// width: 100%;
			display: flex;
			justify-content: end;
			cursor: pointer;
			align-items: center;
			gap: 15px;
			.collect-item {
				display: flex;
				justify-content: center;
				align-items: center;
				// color: #ff952c;
				span {
					margin-left: 20px;
				}
			}
		}

		.label {
			padding-right: 20px;
			white-space: nowrap;
		}
		.tagLabel {
			// position: absolute;
			position: relative;
			width: 50px;
			height: 50px;
			.tagLabel-title {
				position: absolute;
				top: 10px;
				left: 0;
			}
		}
		.biao-icon {
			width: 15px;
			margin-right: 5px;
		}
		.flex-start {
			display: flex;
			padding: 15px 0;
			border-bottom: 1px dashed #eceef5;
			height: 100%;
		}
		.tag-box {
			margin-left: 20px;
			display: flex;
			flex-wrap: wrap;
			position: relative;
			// flex: 1;
			// margin-left: 50px;
			.zhankai {
				// position: absolute;
				// right: 0;
				// bottom: 10px;
				margin-left: 10px;
				cursor: pointer;
				display: flex;
				align-items: center;
				color: #2972fa;
			}
			.tag {
				cursor: pointer;
				height: 28px;
				background: rgba(41, 114, 250, 0.1);
				border-radius: 3px;
				padding: 0 10px;
				margin: 10px 5px;
				@include maxWidth(800) {
					margin: px2vw(15) px2vw(5);
				}
			}
		}
		// .zhankai {
		// 	position: absolute;
		// 	right: 0;
		// 	top: 0;
		// 	cursor: pointer;
		// 	display: flex;
		// 	align-items: center;
		// 	color: #2972fa;
		// }
		// .tag-box {
		// 	display: flex;
		// 	flex-wrap: wrap;
		// 	.tag {
		// 		cursor: pointer;
		// 		height: 28px;
		// 		background: rgba(41, 114, 250, 0.1);
		// 		border-radius: 3px;
		// 		padding: 0 10px 0 9px;
		// 		margin-right: 5px;
		// 		margin: 10px 5px;
		// 		@include maxWidth(800) {
		// 			margin: px2vw(15) px2vw(5);
		// 		}
		// 	}
		// }
		.hr {
			border-bottom: 1px dashed #eceef5;
			margin: 15px 10px;

			&:nth-of-type(2) {
				margin: 13px 10px;
			}
		}

		.bian-icon {
			width: 16px;
			margin-right: 10px;
			object-fit: contain;
		}
		.bian-icon-two {
			width: 20px;
			margin-right: 8px;
		}
		.bian-icon-img {
			-webkit-animation: xing 0.3s linear;
		}
		@keyframes xing {
			0% {
				transform: scale(1);
			}
			75% {
				transform: scale(1.5);
			}
		}

		.title-icon {
			width: 30px;
			margin-right: 10px;
			@include maxWidth(800) {
				width: 25px;
			}
			@include maxWidth(600) {
				width: 20px;
			}
		}
		.title-size {
			@include maxWidth(800) {
				font-size: 20px;
			}
			@include maxWidth(600) {
				font-size: 18px;
			}
		}
	}

	.content {
		margin: 20px auto;
		width: 95%;
		max-width: 1440px;
	}
	.left-rating {
		padding: 30px 24px;
		@include maxWidth(500) {
			padding: 2vw 2vh;
		}
		.firstLevelComments {
			position: relative;
			display: flex;
			width: 100%;
			// height: 30px;
			img {
				width: 25px;
				height: 25px;
			}
			.firstLevelComments-name {
				margin: 0 10px;
			}

			.hfsc {
				position: absolute;
				right: 0;
				top: 0;
				display: flex;
				div {
					margin-right: 5px;
				}
				.hfsc-dian-item {
					width: 20px;
					height: 20px;
					cursor: pointer;
					margin-right: 15px;
					@include maxWidth(768) {
						margin-right: 5px;
					}
					img {
						width: 100%;
						height: 100%;
					}
					.hfsc-dian-item-img {
						-webkit-animation: xing 0.3s linear;
					}
					@keyframes xing {
						0% {
							transform: scale(1);
						}
						75% {
							transform: scale(1.5);
						}
					}
				}
				.hfsc-dian {
					width: 20px;
					height: 20px;
					cursor: pointer;
					margin-right: 15px;
					@include maxWidth(768) {
						margin-right: 5px;
					}
					img {
						width: 100%;
						height: 100%;
					}
				}
			}
		}
		.comments {
			margin: 5px;

			// position: relative;
			.comments-button {
				// position: absolute;
				// right: 70px;
				// bottom: 10px;
				display: flex;
				justify-content: flex-end;
				margin-top: 10px;
			}
			.comments-button-qx {
				// position: absolute;
				// right: 150px;
				// bottom: 10px;
			}
		}
		.firstContenr {
			font-size: 16px;
			margin: 5px 0;
			padding-left: 32px;
			font-family: "微软雅黑";
			white-space: pre-wrap;
		}
		.zhankai {
			font-size: 14px;
			width: 100%;
			text-align: center;
			padding-bottom: 10px;
			cursor: pointer;
		}
		.erji {
			background-color: #f4f4f4;
			padding: 5px;
			padding-top: 20px;
			.firstLevelComments-two {
				position: relative;
				padding-left: 30px;
				display: flex;
				.firstLevelComments-y {
					display: none;
					@include maxWidth(768) {
						display: block;
					}
				}
				.firstLevelComments-item {
					display: flex;
					font-size: 14px;
					height: 30px;
					line-height: 30px;
					margin-left: 5px;
					img {
						width: 20px;
						height: 20px;
					}
					.firstLevelComments-name {
						padding: 0 5px;
					}
				}
				.hfsc {
					position: absolute;
					right: 0;
					top: 0;
					display: flex;
					div {
						margin-right: 5px;
					}
					.hfsc-dian {
						width: 1.3em;
						height: 1.3em;
						cursor: pointer;
						img {
							width: 100%;
							height: 100%;
						}
						.hfsc-dian-item {
							-webkit-animation: xing 0.3s linear;
						}
						@keyframes xing {
							0% {
								transform: scale(1);
							}
							75% {
								transform: scale(1.5);
							}
						}
					}
				}

				.huifu {
					height: 20px;
					font-size: 12px;
					line-height: 30px;
					@include maxWidth(768) {
						height: 30px;
						padding-left: 20px;
					}
				}
			}
			.twoPase {
				display: flex;
				padding-bottom: 10px;
				padding-left: 36px;
				.twoPage-ye {
					cursor: pointer;
				}
				.twoPase-page {
					padding: 0 5px;
					cursor: pointer;
					&:hover {
						color: #2972fa;
					}
				}
				.active {
					color: #2972fa;
				}
			}
		}

		.firstLevelComments-two-content {
			margin: 0 65px;
			padding: 0 0 5px 0;
			font-family: "微软雅黑";
			white-space: pre-wrap;
		}
		.hr {
			height: 4px;
			background: #f8f8f8;
			margin: 15px 0 23px;
		}

		:deep(.el-textarea .el-input__count) {
			bottom: 20px;
			right: 11px;
			font-size: 1px;
			color: #909399;
		}

		:deep(.rating-input .el-textarea__inner) {
			height: 120px;
			border-radius: 2px;
			margin: 20px 0 12px;
		}
	}
}
.return-button {
	// margin-right: 20px;
	// margin-top: 15px;
	display: flex;
	justify-content: flex-end;
	@include maxWidth(800) {
		// display: none;
	}
}
.right {
	@include maxWidth(1200) {
		width: 200px;
	}
	@include maxWidth(1024) {
		display: none;
	}
}

.firstLevelComments-x {
	display: flex;
	@include maxWidth(768) {
		display: none;
	}
}
.bor0 {
	// padding-bottom: 15px;
	@include maxWidth(768) {
		padding-bottom: 1vh;
		border-bottom: 2px dashed #fff;
		margin-bottom: 1vh;
		&:last-child {
			border: 0;
		}
	}
}
</style>
